<template>
  <div class="text">
    <div class="text-content" :style="styleOption">
      {{ timeContent }}
    </div>
  </div>
</template>
<script setup>
import { watch } from 'vue'
import dayjs from 'dayjs'
let props = defineProps({
  formData: {
    type: Object,
    default: () => {},
  },
})

let { formData } = toRefs(props)
let styleOption = ref({})
let timeContent = ref()
watch(
  () => formData.value.advancedConfig,
  (newVal) => {
    if (newVal) {
      styleOption.value = {
        backgroundColor: newVal.backgroundColor,
        color: newVal.color,
        alignItems: newVal.alignItems,
        justifyContent: newVal.justifyContent,
        fontSize: newVal.fontSize + 'px',
      }
      timeContent.value = dayjs().format(newVal.format)
    }
  },
  {
    deep: true,
    immediate: true,
  },
)
</script>
<style scoped>
.text {
  width: 100%;
  height: 100%;
}
.text-content {
  height: 100%;
  overflow: hidden;
  display: flex;
}
.text-page {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: relative;
  perspective: 1000px;
  background: rgba(255, 255, 255, 1);
}
.text-page-list {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: absolute;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1s;
  transform: rotateY(0deg);
  display: flex;
}
.scroll-container {
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.scroll-containerTop {
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  flex-wrap: wrap;
}
.scroll-text {
  display: inline-block;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  min-height: 100%;
  min-width: 100%;
}
.text-page-list.scrollRight {
  transform: rotateY(180deg);
}
.text-page-list.scrollLeft {
  transform: rotateY(-180deg);
}
.text-page-list.scrollTop {
  transform: rotateX(-180deg);
}
.text-page-list.scrollBottom {
  transform: rotateX(180deg);
}
</style>
